<nz-layout>
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" class="left-sider">
    <div class="logo">
      <div *ngIf="!isCollapsed" class="text">管理システム【開発】</div>
    </div>
    <ul nz-menu class="menu">
      <li nz-submenu class="menu-item" [ngClass]="{ 'menu-item-active': menuIndex === 0 }" (click)="toWelcome()">
        <span nz-icon nzType="alert" nzTheme="outline" class="icon"></span>
        <span *ngIf="!isCollapsed">Welcome</span>
      </li>
      <li nz-submenu class="menu-item" [ngClass]="{ 'menu-item-active': menuIndex === 1 }" (click)="toGoods()">
        <span nz-icon nzType="dollar" nzTheme="outline" class="icon"></span>
        <span *ngIf="!isCollapsed">商品管理</span>
      </li>
      <li nz-submenu class="menu-item" [ngClass]="{ 'menu-item-active': menuIndex === 2 }" (click)="toAddGoods()">
        <span nz-icon nzType="appstore-add" nzTheme="outline" class="icon"></span>
        <span *ngIf="!isCollapsed">商品添加</span>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <span class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
        (click)="isCollapsed = !isCollapsed"></span>
    </nz-header>
    <nz-content>
      <nz-breadcrumb>
        <nz-breadcrumb-item nzAutoGenerate="true"></nz-breadcrumb-item>
      </nz-breadcrumb>
      <div class="content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
